<!DOCTYPE HTML>
<html>
<head>
<head>
	<title>芭蕉花管理平台-用户注册数据统计</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="SHORTCUT ICON" href="/img/favicon.ico">
	<script type="text/javascript">
		var pathname = window.location.pathname;
		if (pathname != "/mobile/home.html") {
			location.href = '/';
		}
	</script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/exporting.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/oldie.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/series-label.js"></script>
	<script type="text/javascript" src="/mobile/js/plugin/highcharts/highcharts-zh_CN.js"></script>
</head>
<body>
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#" onclick="goMenu();return false;"><i class="fa fa-chevron-left"></i><span style="padding-left: 10px;">菜单</span></a></li>
				<li class="breadcrumb-item active" aria-current="page">用户注册数据统计</li>
			</ol>
		</nav>
		<nav>
			<div class="nav nav-tabs" id="nav-tab" role="tablist">
				<a class="nav-item nav-link active" id="nav-tab-total" data-toggle="tab" href="#nav-total" role="tab" aria-controls="nav-total" aria-selected="true">总注册人数</a>
				<a class="nav-item nav-link" id="nav-tab-today" data-toggle="tab" href="#nav-today" role="tab" aria-controls="nav-today" aria-selected="false">今日注册人数</a>
			</div>
		</nav>
		<div class="tab-content" id="nav-tabContent">
			<div class="tab-pane fade show active" id="nav-total" role="tabpanel" aria-labelledby="nav-tab-total">
				<div id="chart-total" style="margin-top: 1rem; margin-bottom: 1rem;"></div>
			</div>
			<div class="tab-pane fade" id="nav-today" role="tabpanel" aria-labelledby="nav-tab-today">
				<div id="chart-today" style="margin-top: 1rem; margin-bottom: 1rem;"></div>
			</div>
		</div>
	</div>

<script>
	//初始化数据
	$(document).ready(function() {
		getTotal();
		getToday();
	});

	function goMenu() {
		getHtml('/mobile/menu.html');
	}

	//平台注册中人数
	function getTotal() {
		let url = "/dataStatist/registerData";
		let params = {
				"flag" : "0"
		}
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				let dataList = data.dataList;
				let title = "总注册人数";
				let container = "chart-total";
				showChart(title, dataList, container);
			}
		});
	}

	//查看今日数据
	function getToday() {
		let url = "/dataStatist/registerData";
		let params = {
				"flag" : "1"
		}
		getMapData(url, params, function(data, result) {
			if (result == "success") {
				let dataList = data.dataList;
				let title = "今日注册人数";
				let container = "chart-today";
				showChart(title, dataList, container);
			}
		});
	}

	//显示数据
	function showChart(title, data, container){
		Highcharts.chart(container, {
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				type: 'pie'
			},
			title: {
				text: title
			},
			tooltip: {
				// pointFormat: '{series.name}: <b>{series.y:.1f}人</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: false
					},
					showInLegend: true,
					dataLabels: {
						enabled: true,
						formatter: function() {
							//this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
							let labelHtml = '<span style="color: ' + this.point.color + '"> 人数：'+ this.y + '，占比' + this.percentage.toFixed(1) + '%</span>';
							return labelHtml;
						}
					}
				}
			},
			series: [{
				name: '人数',
				colorByPoint: true,
				data: data
			}]
		});
	}
</script>
</body>
</html>